import React, { useEffect, useState } from 'react';
import { fetchTopics, fetchPosts } from '../api';
import { useNavigate } from 'react-router-dom';
import TopicModal from '../components/TopicModal';

const Home: React.FC = () => {
  const [topics, setTopics] = useState<any[]>([]);
  const [selectedTopic, setSelectedTopic] = useState<any>(null);
  const [posts, setPosts] = useState<any[]>([]);
  const [showTopicModal, setShowTopicModal] = useState(false);
  const navigate = useNavigate();

  // 拉取所有话题
  useEffect(() => {
    fetchTopics().then(res => {
      const data = res.data?.data || res.data;
      setTopics(Array.isArray(data) ? data : []);
    });
  }, []);

  // 首页只展示全部帖子
  useEffect(() => {
    fetchPosts().then(res => {
      const data = res.data?.data || res.data;
      setPosts(Array.isArray(data) ? data : []);
    });
  }, []);

  return (
    <div style={{ display: 'flex', height: '100vh', background: '#f6f7fb' }}>
      {/* 左侧：帖子概览 */}
      <div style={{ flex: 1, minWidth: 400, maxWidth: 600, padding: '32px 0 32px 32px' }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 24 }}>
          <span style={{ fontWeight: 700, fontSize: 32, color: '#e53935', marginRight: 16 }}>WTE</span>
          <input style={{ flex: 1, height: 36, borderRadius: 6, border: '1px solid #ddd', padding: '0 12px', fontSize: 16 }} placeholder="请输入搜索内容" />
        </div>
        <div style={{ fontWeight: 600, fontSize: 20, marginBottom: 16 }}>最热</div>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
          {posts.length === 0 && <li style={{ color: '#888', padding: 12 }}>暂无帖子</li>}
          {posts.map(post => (
            <li
              key={post.id}
              style={{ background: '#fff', borderRadius: 8, marginBottom: 18, padding: '16px 18px', boxShadow: '0 1px 4px 0 rgba(0,0,0,0.03)', cursor: 'pointer', display: 'flex', flexDirection: 'column' }}
              onClick={() => navigate(`/topics/${post.topicId}/posts/${post.id}`)}
            >
              <div style={{ fontWeight: 500, fontSize: 17, marginBottom: 6 }}>{post.title}</div>
              <div style={{ display: 'flex', alignItems: 'center', fontSize: 14, color: '#888' }}>
                <span style={{ background: '#f1f5fa', borderRadius: 4, padding: '2px 8px', marginRight: 8 }}>{topics.find(t => t.id === post.topicId)?.name || '话题'}</span>
                <span style={{ marginRight: 8 }}>{post.author || '匿名'}</span>
                <span style={{ marginRight: 8 }}>{post.createdAt ? new Date(post.createdAt).toLocaleString() : ''}</span>
                <span>{post._count?.comments ?? 0} 条评论</span>
              </div>
            </li>
          ))}
        </ul>
        <div style={{ marginTop: 32, color: '#bbb', textAlign: 'center' }}>创意工作者们的社区</div>
      </div>
      {/* 右侧：话题导航栏 */}
      <div style={{ width: 260, background: '#fff', borderLeft: '1px solid #eee', padding: '32px 24px 0 24px', boxShadow: '0 1px 4px 0 rgba(0,0,0,0.03)' }}>
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
          <button style={{ border: '1px solid #222', background: '#fff', color: '#222', borderRadius: 8, padding: '6px 18px', fontWeight: 500 }} onClick={() => setShowTopicModal(true)}>
            创建话题
          </button>
        </div>
        <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 12 }}>话题</div>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
          {topics.map(topic => (
            <li
              key={topic.id}
              style={{ padding: '10px 0', cursor: 'pointer', color: '#222', fontWeight: 400 }}
              onClick={() => navigate(`/topics/${topic.id}`)}
            >
              {topic.name}
            </li>
          ))}
        </ul>
      </div>
      {/* 创建话题弹窗 */}
      <TopicModal visible={showTopicModal} onClose={() => setShowTopicModal(false)} />
    </div>
  );
};

export default Home;